<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
	</head>
	<body>
		<div id="app">
			<!-- 增加 -->
			<div align="center">
				  姓名:<input type="text"v-model="addUser.name" />
				  年龄:<input type="text"v-model="addUser.age" />
				  性别:<input type="text"v-model="addUser.sex" />
			     <button @click="addUserBtn">新增</button>
			  </div>
		<!-- 查询 -->
		  <div>
			  <table border="1px"align="center"width="80%">
				  <tr align="center">
					  <th colspan="5"><h3>用户列表</h3></th> 
				  </tr>
				  <tr align="center">
					  <th>编号</th>
					  <th>姓名</th>
					  <th>年龄</th>
					  <th>性别</th>
					  <th>操作</th>
				  </tr>
				  <tr align="center" v-for="user in userList">
					  <th v-text="user.id"></th>
					   <th v-text="user.name"></th>
					    <th v-text="user.age"></th>
						 <th v-text="user.sex"></th>
						<th width="20%">
						<button @click="UpdateBt(user)">修改</button>
						<button @click="deleteUser(user)">删除</button>
						</th> 
				  </tr>
			  </table>
		  </div>
		  <hr />
		
		
		
		<!-- 修改 -->
		  <div align="center">
			  <p>
				  编号:<input type="text" disabled v-model="updateUser.id"/>
				  姓名:<input type="text" v-model="updateUser.name"/>
			  </p>
			  <p>
			  	 年龄:<input type="text" v-model="updateUser.age"/>
			  	 性别:<input type="text" v-model="updateUser.sex"/>
			  </p>
			  <p>
				  <button @click="Updateuser">提交修改</button>
			  </p>
		  </div>
		
		<!-- 删除 -->
		  <div></div>
		
		
		</div>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
		axios.defaults.baseURL="http://localhost:8090/vue"
		const app=new Vue({
			el:"#app",
			data:{
				userList:[],
				addUser:{
					name:'',
					age:'',
					sex:''
				},
				updateUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
			},
			methods:{
				getUserList(){
					axios.get("/findall").then(Promise=>{
						this.userList=Promise.data
					})
				},
				deleteUser(user){
					axios.delete("/deleteuserById?id="+user.id)
					.then(Promise=>{
						alert(Promise.data)
						this.getUserList()
					})
				},
			addUserBtn(){
				axios.post("/saveuser",this.addUser)
				.then(Promise=>{
					let msg=Promise.data
					alert(msg)
					this.getUserList()
					this.addUser={}
				})
				},
			UpdateBt(user){
				this.updateUser=user
				},
			Updateuser(){
				axios.put("/updateuser",this.updateUser).then(Promise=>{
					alert(Promise.data)
					this.getUserList()
				})
			}
				
			},
			created(){
				this.getUserList()
			}
		})
		</script>
	</body>
</html>
